<template>
  <div class="introduce">
    <div class="title-msg">商城信息</div>

    <InfoFrame class="goods-info"
               titleBgcColor="#28a745"
               head="商品总数"
               link="/admin/goods"
               :content="goodsCount"></InfoFrame>
    <InfoFrame class="user-info"
               title-bgc-color="#17a2b8"
               head="用户总数"
               link="/admin/user"
               :content="userCount"></InfoFrame>
    <InfoFrame class="category-info"
               title-bgc-color="#ffc107"
               head="类目总数"
               link="/admin/category"
               :content="rootCategoryCount + goodsCategoryCount"></InfoFrame>
    <InfoFrame class="order-info"
               title-bgc-color="#007bff"
               head="订单总数"
               link="/admin/order"
               :content="orderCount"></InfoFrame>
    <InfoFrame class="buy-good-info"
               title-bgc-color="#007bff"
               head="累计交易"
               link="/admin/transaction"
               :content="orderDetailCount"></InfoFrame>

  </div>
</template>

<script>
  import InfoFrame from "components/content/info_frame/InfoFrame";
  import {getGoodsList, getGoodsCategory, getOrderList, getOrderDetail} from "network/mix"
  import {getUserList} from "network/admin"

  export default {
    name: "Introduce",
    components: {
      InfoFrame,
    },
    data() {
      return {
        goodsCount: 0, // 商品
        userCount: 0, // 用户
        rootCategoryCount: 0, // root类目
        goodsCategoryCount: 0, // 商品类目
        orderCount: 0, // 订单
        orderDetailCount: 0, // 订单明细,即累计交易
      }
    },
    mounted() {
      this.mGetGoodsList()
      this.mGetGoodsCategory()
      this.mGetOrderList()
      this.mGetOrderDetail()
      this.mGetUserList()
    },
    methods: {
      mGetGoodsList() { // 获取全部商品
        getGoodsList()
          .then(res => {
            this.goodsCount = res.page.count
            this.rootCategoryCount = res.root_navs.length // 获取主类目
            // console.log(this.goodsCount);
            // console.log(this.rootCategoryCount);
          })
      },
      mGetGoodsCategory() { // 获取全部商品类目
        getGoodsCategory()
          .then(res => {
            this.goodsCategoryCount = res.page.count
          })
      },
      mGetOrderList() { // 获取全部订单
        getOrderList()
          .then(res => {
            this.orderCount = res.page.count
          })
      },
      mGetOrderDetail() { // 获取全部订单明细
        getOrderDetail()
          .then(res => {
            // console.log(res.orderList.length);
            this.orderDetailCount = res.orderList.length
          })
      },
      mGetUserList() { // 获取全部用户
        getUserList()
          .then(res => {
            this.userCount = res.page.count
          })
      }
    }
  }
</script>

<style scoped>
  .introduce {
    height: 100%;
    /*background-color: green;*/
  }
  .title-msg {
    height: 60px;
    line-height: 60px;
    margin-left: 20px;
    margin-right: 20px;
    border-bottom-right-radius: 6px;
    border-bottom-left-radius: 6px;
    border: 1px solid #cdcdcd;

    text-align: center;
    font-size: 30px;

    background-color: white;
  }
  .goods-info {
    position: absolute;
    top: 150px;
    left: 20px;
  }
  .user-info {
    position: absolute;
    top: 150px;
    left: 500px;
  }
  .category-info {
    position: absolute;
    top: 150px;
    right: 20px;
  }
  .order-info {
    position: absolute;
    top: 400px;
    left: 260px;
  }
  .buy-good-info {
    position: absolute;
    top: 400px;
    right: 270px;
  }
</style>